<div [@routerTransition]>
  <!-- <div class="m-subheader">
    <div class="d-flex align-items-center">
      <div class="mr-auto">
        <h3 class="m-subheader__title"><span>生产准备</span></h3>
      </div>
    </div>
    style="background-color: #2f2e3c; height: 62rem"
  </div> -->

  <div
    class="m-content"
    style="
      height: 68rem;
      background: url(/assets/common/images/demo/bg02.png);

      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
    "
  >
    <div class="m-portlet__body">
      <div class="row">
        <div class="col-md-12 datachar-header">
          <div class="header-left fl" id="time"></div>
          <div class="header-center fl">
            <div class="header-title">钣金车间制造执行数据分析</div>
            <div class="header-img"></div>
          </div>
          <div class="header-right fl">
            <a
              class="btn btn-primary"
              href="/#/app/datadisplay/demo1"
              style="background-color: transparent; margin-top: 2rem"
            >
              月度计划及生产准备
            </a>

            <a
              class="btn btn-primary"
              style="background-color: transparent; margin-top: 2rem"
              href="/#/app/datadisplay/demo3"
            >
              经营管理数据分析
            </a>
            <button
              class="btn btn-primary"
              *ngIf="isshow == true"
              (click)="hiddentop()"
              style="background-color: transparent; margin-top: 2rem"
            >
              隐藏
            </button>
            <button
              class="btn btn-primary"
              *ngIf="isshow == false"
              (click)="showtop()"
              style="background-color: transparent; margin-top: 2rem"
            >
              显示
            </button>
          </div>
          <div class="header-bottom fl"></div>
        </div>

        <div class="col-md-12">
          <div class="dashboard_graph x_panel" style=" height: 51px;display: flex;justify-content: flex-end;">
              <div style="width: 21%; display:flex; align-items: center;" >
             <label style ="margin-right: 10px; margin-bottom: 0px;color: #fff!important;"
             >请选择时间:</label >
             <p-calendar [(ngModel)]="getTime" view="month"  dateFormat="yy-mm" [yearNavigator]="true" [yearNavigator]="true"  yearRange="1000:2050" ></p-calendar>
             <button 
             class="btn btn-primary"
             (click)="init()"
             style="height: 32px; margin-left: 5px;line-height: 100%;background-color: #001131;"
            >
             查询
         </button>
          </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="col-md-3 datachar-left">
            <div class="datachar-left-top">
              <div class="alltitle">车间任务执行分析</div>

              <div class="sycm">
                <ul class="clearfix">
                  <li>
                    <h2>{{ GetMonthlyPlanCount }}</h2>
                    <span>本月计划数量</span>
                  </li>
                  <li>
                    <h2>{{ GetMonthlyPlanProductionCount }}</h2>
                    <span>本月投产数量</span>
                  </li>
                  <li>
                    <h2>{{ GetCurrentmMouthDeliveryRecords }}</h2>
                    <span>本月交付数量</span>
                  </li>
                </ul>
                <div
                  style="border-bottom: 1px solid rgba(255, 255, 255, 0.1)"
                ></div>
                <ul class="clearfix">
                  <li>
                    <!-- GetWorkTimeCount='';
                    GetAbnormalCount='';
                    GetProcedureFinshCount=''; -->
                    <h2>{{GetWorkTimeCount}}</h2>
                    <span>工时总数</span>
                  </li>
                  <li>
                    <h2>{{GetAbnormalCount}}</h2>
                    <span>异常数量</span>
                  </li>
                  <li>
                    <h2>{{GetProcedureFinshCount}}</h2>
                    <span>工序完成数量</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="datachar-left-bottom">
              <div class="title" style="margin: 2% 0 1% 0">
                班组任务执行分析
              </div>
              <div id="chart2" class="allnav" style="margin-top: -1%"></div>
            </div>
          </div>
          <div class="col-md-6 datachar-center">
            <div class="datachar-center-top">
              <div
                class="datachar-center-top-content"
                id="channel_handle_detail"
              ></div>
            </div>
            <div class="datachar-center-center">
              <div class="datachar-center-center-left">
                <div class="title">班组任务执行分析</div>
                <div
                  class="datachar-center-center-leftchar"
                  id="business-type-time-detial"
                ></div>
              </div>
              <div class="datachar-center-center-right">
                <div class="title">车间原材料数据分析</div>
                <div class="com-screen-content2">
                  <ul class="use-data">
                    <li>
                      <p class="data-count">
                        入库总量：<span class="data-name">{{ materialPluss }}</span>
                      </p>
                    </li>
                    <li>
                      <p class="data-count">
                        出库总量：<span class="data-name">{{materialSubtracts}}</span>
                      </p>
                    </li>
                    <li>
                      <p class="data-count">
                        退库总量：<span class="data-name">{{materialReturnCount}}</span>
                      </p>
                    </li>
                  </ul>
                  <div class="com-screen-content">
                    <div id="main2" style="width: 100%; height: 15.5rem"></div>
                  </div>
                  <span class="left-top"></span>
                  <span class="right-top"></span>
                  <span class="left-bottom"></span>
                  <span class="right-bottom"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 datachar-right">
            <div class="datachar-right-top">
              <div class="col-info" style="padding-top: 1%">
                <!-- <div class="title">营业员受理详情</div> -->
                <div class="content staff-info" id="staff-info"></div>
              </div>
            </div>
            <div class="datachar-right-bottom">
              <div class="bottom_2 fl">
                <div class="main_title">
                  <!-- <img src="img/title_6.png" alt="" /> -->
                  车间工时排名前5名
                </div>
                <div class="main_table">
                  <table>
                    <thead>
                      <tr>
                        <th>排名</th>
                        <th>姓名</th>
                        <th>工时(h)</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>134.2</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>李四</td>
                        <td>134.2</td>
                      </tr>
                      <tr>
                        <td>3</td>
                        <td>王五</td>
                        <td>134.2</td>
                      </tr>
                      <tr>
                        <td>4</td>
                        <td>赵六</td>
                        <td>134.2</td>
                      </tr>
                      <tr>
                        <td>5</td>
                        <td>陈七</td>
                        <td>134.2</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="bottom_3 fl">
                <div class="main_title">
                  <!-- <img src="img/title_6.png" alt="" /> -->
                  节点执行排名前5名
                </div>
                <div class="main_table">
                  <table>
                    <thead>
                      <tr>
                        <th>排名</th>
                        <th>姓名</th>
                        <th>数量(个)</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr   *ngFor="let item of GetNodeExeSort;let key=index" >
                        <td>{{item.order}}</td>
                        <td>{{item.asDay}}</td>
                        <td>{{item.count}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
